import React, { useEffect, useState } from "react";
import { Image, Swiper } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import $fetch from "../../../../utils/app/$fetch";

export default function HomePage() {
  const navigate: any = useNavigate();
  const [groupInfList, setGroupInfList] = useState<any>({});
  const [introduce, setIntroduction] = useState('');
  const [albumList, setAlbumList] = useState([]);

  // 获取主页信息
  useEffect(() => {
    initPage();
  }, []);

  const initPage = async () => {
    try {
      let res: any = await $fetch("/home/content");
      const albumList = res?.albumList?.sort((a: any, b: any) => b.id - a.id);
      setAlbumList(albumList);
      setGroupInfList(res?.groupInfList?.[0]);
      const introduce = res?.groupInfList?.[0]?.groupIntroduction
      setIntroduction(introduce)
    } catch (error) {
      console.log(error, "______error");
    }
  };

  return (
    <>
      <div className="that_header_mask">
      <Image src={groupInfList?.groupPhoto} fit='cover' lazy={true} width='100%' height='7.12rem' />
      </div>
      <div className="that_team_intro">
        <div>
          <h3>{groupInfList?.groupName}</h3>
          <div>{introduce}</div>
        </div>
      </div>
      <div className="that_main_wraper">
        {/* 成员列表 */}
        <li
          onClick={() => {
            navigate("/person/list");
          }}
        >
          <div>
            <img src={require("@/asset/imgs/icon_person.png")}></img>
          </div>
          <div>成员列表</div>
        </li>

        {/* 活动日程 */}
        <li
          onClick={() => {
            navigate("/schedule/list");
          }}
        >
          <div>
            <img src={require("@/asset/imgs/icon_schedule.png")}></img>
          </div>
          <div>活动日程</div>
        </li>

        {/* 商城 */}
        <li
          onClick={() => {
            navigate("/goods/list");
          }}
        >
          <div>
            <img src={require("@/asset/imgs/icon_shop.png")}></img>
          </div>
          <div>商城</div>
        </li>
        <li
          onClick={() => {
            navigate("/club/join");
          }}
        >
          <div>
            <img src={require("@/asset/imgs/icon_club.png")}></img>
          </div>
          <div>fanclub</div>
        </li>
      </div>
      <ul className="that_banner_wraper">
        <h3>NEWS</h3>
        <Swiper
          trackOffset={10}
          slideSize={75}
          defaultIndex={0}
        >
          {albumList?.map((img: any) => (
            <Swiper.Item key={img?.id}>
              <Image src={img?.url} fit='cover' width='6rem' height='6rem'/>
            </Swiper.Item>
          ))}
        </Swiper>
      </ul>
      
    </>
  );
}
